<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider class=" md:block hidden !fixed bottom-0 left-0 top-0 h-full z-50 !max-w-[224px] !min-w-[224px]  !w-56 ">
      <ul>
        <li @click="router.push({ path: '/' })" class=" cursor-pointer my-3 text-center text-default font-semibold text-xl ">
          Chat Gpt
        </li>
        <li @click="router.push({ path: '/dashboard' })" :class='{
                        "bg-white bg-opacity-10": route.name == "dashboard"
                    }' class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
          <pie-chart-outlined class="mr-2 ml-3" />
          <span>数据看板</span>
        </li>
        <li @click="router.push({ path: '/user' })" :class='{
                        "bg-white bg-opacity-10": route.name == "user"
                    }' class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
          <user-outlined class="mr-2 ml-3" />
          <span>用户管理</span>
        </li>
        <li @click="router.push({ name: 'question' })" :class='{
                        "bg-white bg-opacity-10": route.name == "question"
                    }' class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
          <question-circle-outlined class="mr-2 ml-3" />
          <span>问题管理</span>
        </li>
        <li @click="router.push({ name: 'coupons' })" :class='{
                        "bg-white bg-opacity-10": route.name == "coupons"
                    }' class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
          <share-alt-outlined class="mr-2 ml-3" />
          <span>优惠券管理</span>
        </li>
        <li @click="router.push({ path: '/' })" class=" chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
          <arrow-left-outlined class=" mr-2 ml-3" />
          <span>返回系统</span>
        </li>
      </ul>
    </a-layout-sider>
    <a-layout class=" md:ml-[230px] md:mt-0 mt-14">
      <a-layout-content class=" md:px-4 px-2">
        <div class=" h-full">
          <router-view :key="route.fullPath" />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import main from '@/store/index'
import {
  ArrowLeftOutlined,
  QuestionCircleOutlined,
  ShareAltOutlined,
  UserOutlined,
  PieChartOutlined,
} from '@ant-design/icons-vue'
import { storeToRefs } from 'pinia'
const { chatList, askStatus, askContent, currentChatId } = storeToRefs(main())
let router = useRouter()
let route = useRoute()
let show_manage = ref<boolean>(false)
let chatLists = ref<any[]>([])
const chatInfo = reactive({
  id: 0,
  title: '',
})

let selectedKeys = ref<string[]>(['1'])
</script>
<style>
.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

.ope {
  display: none;
}

.chatItem:hover .ope {
  display: block;
}

.chatItem .ant-input {
  background-color: transparent;
  color: white;
}

.add {
  transition: all 0.3s ease 0s;
  transform: rotate(45deg) translate3d(12px, 0px, 0px);
  background: url('')
    no-repeat;
}

.add.seleced {
  transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
</style>
  